<template>
  <div class="app-container">
    <div class="filter-container filter1">
<!--      <el-input v-model="listQuery.productCode" placeholder="产品编号" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />-->
      <el-input v-model="listQuery.workpieceCode" placeholder="工件编号" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
<!--      <el-input v-model="listQuery.workpieceName" placeholder="工件名字" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />-->
      <el-input v-model="listQuery.month" placeholder="完成月份" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.day" placeholder="结束日期" style="width: 100px;display: none;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
<!--      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="test">-->
<!--        测试-->
<!--      </el-button>-->
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      element-loading-text="Loading"
      height="1000"
      style="width: 100%">

      <el-table-column type="expand">
        <template slot-scope="workpieces">
          <el-table
            :data="workpieces.row.procedureList"
            style="width: 100%"
            show-header="false"
          >

            <el-table-column fixed label="项目" align="center" width="180px">
              <template slot-scope="procedures">
                {{ procedures.row.procedureName }}
              </template>
            </el-table-column>
            <el-table-column label="月计划下达数" align="center" width="120px">
              <template slot-scope="procedures">
                <!-- {{ procedures.row.procedureName }}-->
                {{ procedures.row.mouthPlanCount }}
              </template>
            </el-table-column>
            <el-table-column label="期初数" align="center" width="100px">
              <template slot-scope="procedures">
                <!-- {{ procedures.row.procedureName }}-->
                {{ procedures.row.mouthStartVlaue }}
              </template>
            </el-table-column>
            <el-table-column label="累计完成数" align="center" width="100px">
            <template slot-scope="procedures">
              <!-- {{ procedures.row.procedureName }}-->
              {{ procedures.row.mouthTotal }}
            </template>
          </el-table-column>
<!--            <el-table-column label="主从齿差数" align="center" width="100px">-->
<!--              <template slot-scope="procedures">-->
<!--                &lt;!&ndash; {{ procedures.row.procedureName }}&ndash;&gt;-->
<!--                {{ procedures.row.masterLessThanPassive }}-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="累计差数" align="center" width="100px">
              <template slot-scope="procedures">
                <!-- {{ procedures.row.procedureName }}-->
                {{ procedures.row.lessThanCount }}
              </template>
            </el-table-column>
            <!--<el-table-column label="月完成进度" width="1600px">
              <template slot-scope="procedures">
                <ul class="box-31">
                  <li v-for="(item, index) in 31">
                    <div class="div1">{{index+1}}</div>
                    <div class="div2">{{procedures.row.mouthCountArray[index]}}</div>
                  </li>
                </ul>
              </template>
            </el-table-column>-->
            <el-table-column label="本月完成数"  width="100px" align="center">
              <template slot-scope="procedures">
                {{ procedures.row.mouthActualCount }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="每日实际完成数">
              <el-table-column  v-for="(item, index) in listQuery.lastMouthdays" v-if="index>=listQuery.day-1"  :label="'上月'+Number(index+1)" width="80px" align="center">
                <template slot-scope="procedures">
                  {{ (procedures.row.mouthCountArray[index]!=undefined)?procedures.row.mouthCountArray[index]:0 }}
                </template>
              </el-table-column>
              <el-table-column  v-for="(item, index) in listQuery.day-1" :label="index+1" width="60px" align="center">
                <template slot-scope="procedures">
                  {{ (procedures.row.mouthCountArray[index]!=undefined)?procedures.row.mouthCountArray[index]:0  }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="序号"  width="50px" type="index" align="center"> </el-table-column>

      <el-table-column label="产品编码" align="center" prop="productCode">
        <template slot-scope="scope">
          {{ scope.row.productCode }}
        </template>
      </el-table-column>
      <el-table-column label="产品老编码" align="center" prop="oldCode"></el-table-column>

      <el-table-column label="工件名称" align="center" prop="workpieceName">
        <template slot-scope="scope">
          {{ scope.row.workpieceName }}
        </template>
      </el-table-column>
      <el-table-column label="工件编码" align="center" prop="workpieceCode">
        <template slot-scope="scope">
          {{ scope.row.workpieceCode }}
        </template>
      </el-table-column>
      <el-table-column label="月总计划数" align="center" prop="mouthCount">
        <template slot-scope="scope">
          {{ scope.row.mouthPlanCount }}
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<style>
  * {
    font-size: 12px;
    margin: 0;
    padding: 0;
  }
  .box-31 {
    /*width: 700px;*/
  }
  .box-31 li{
    float: left;
    list-style: none;
    display: inline-block;
    height: 50px;
    width: 50px;
    border-bottom: 1px dashed rgba(158, 177, 199, 0.4);
    border-right: 1px dashed rgba(158, 177, 199, 0.4);
    /*border-style: dot-dash;*/
  }
  .box-31 .div1{
    color: rgba(158, 177, 199, 0.4);
    text-align: center;
  }
  .box-31 .div2{
    text-align: center;
  }
  .filter1{
    margin-bottom: 20px;
    margin-left: 100px;
  }
</style>

<script>
import { fetchList } from '@/api/workpiece'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        month: '2019-10',
        day: '28',
        lastMouthdays: '31',
        productCode: undefined,
        workpieceCode: undefined,
        workpieceName: undefined
      },
      value: new Date()
    }
  },
  created() {
    this.getList()
    console.log('---' + this.list)
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.lastMouthdays = mGetDate(this.listQuery.month)
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
// 获取某月上月的天数
function mGetDate(date) {
  let mouth = Number(date.split('-')[1])
  if (Number(date.split('-')[1]) === 1) mouth = 12
  const d = new Date(date.split('-')[0], mouth, 0)
  console.log(date.split('-')[0] + mouth + '天数' + d)
  return d.getDate()
}
</script>
